<template lang="pug">
div
    ul(class="preview-list")
        li(v-for="localId in localIds",class="preview-list-item",@click="previewImage(localId)") 
            img(:src="localId")
            span(@click="localIdRemove(localId)")
                i(class="el-icon-close")
        li(v-if="localIds.length<9")
            a(@click="chooseImg",style="display:block;")
                i(class="el-icon-plus")
    el-dialog(:fullscreen="true")
        img()
</template>

<script>
import request from "@/plugins/axios";

export default {
    name: "img-list",
    data() {
        return {
            localIds: [],
            serverIds: [],
            counter: 0
        };
    },
    methods: {
        getWebInfo() {
            var options = {
                url: "/weixin/web",
                data: { url: location.href },
                method: "post"
            };
            request(options).then(this.doWxConf.bind(this)).catch(() => {});
        },
        doWxConf(info) {
            var options = {
                jsApiList: ["chooseImage", "uploadImage", "downloadImage"]
            };

            var options2 = {
                appId: info.appId,
                nonceStr: info.nonceStr,
                signature: info.signature,
                timestamp: info.timestamp
            };

            options = Object.assign(options, options2);
            wx.config(options);
        },
        wxReady() {},
        wxError() {},

        chooseImg() {
            var vm = this;
            var options = {
                count: 9, // 默认9
                localIds: this.localIds,
                sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    vm.localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                }
            };
            wx.chooseImage(options);
        },
        localIdRemove(localId) {
            var index = this.localIds.indexOf(localId);
            this.localIds.splice(index, 1);
        },
        previewImage(localId) {
            wx.previewImage({
                current: localId, // 当前显示图片的http链接
                urls: [] // 需要预览的图片http链接列表
            });
        },
        uploadImages: function() {
            this.counter = 0;
            this.serverIds = [];
            this.localIds.forEach(this.uploadImage.bind(this));
        },
        uploadImage(localId) {
            var vm = this;
            wx.uploadImage({
                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 0, // 默认为1，显示进度提示
                success: function(res) {
                    vm.serverIds.push(res.serverId);
                    vm.counter++;
                    if (vm.counter == vm.localIds.length) {
                        vm.$emit("uploaded", vm.serverIds);
                    }
                }
            });
        },
        getImageLength() {
            return this.localIds.length;
        }
    },
    created() {
        wx.ready(this.wxReady.bind(this));
        wx.error(this.wxError.bind(this));
        this.getWebInfo();
    }
};
</script>

<style>
.preview-list {
    list-style: none;
    padding: 0;
    display: inline-block;
    overflow: hidden;
}
.preview-list li {
    float: left;
    width: 25vw;
    height: 25vw;
    line-height: 25vw;
    border: 1px solid #eaeaea;
    text-align: center;
    margin: 3px;
    overflow: hidden;
    position: relative;
}
.preview-list li img {
    width: 100%;
    height: 100%;
}
.preview-list-item i {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
}
</style>
